<template>
    <div>
        <h1>机构列表</h1>

        <input type="button" value="新增" @click="router.push('/conmanyadd')">


        <div>
            机构名称
            <input type="text" v-model="queryInfo.name">
            特色服务
            <select>
                <option value="">全部</option>
                <option value="1">24h监护</option>
                <option value="2">特殊护理</option>
            </select>
            <input type="button" value="查询" class="btn btn-info" @click="getlist">
            <input type="button" value="批量发布" class="btn btn-info" @click="UpDown(1)">
            <input type="button" value="批量下架" class="btn btn-info" @click="UpDown(0)">
            <input type="button" value="导出" class="btn btn-info" @click="downchek()">
        </div>
        <table class="table table-striped table-bordered table-hover">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checkAll" @click="gocheckall"></td>
                    <td>机构名称</td>
                    <td>特色服务</td>
                    <td>机构封面</td>
                    <td>机构地址</td>
                    <td>联系电话</td>
                    <td>发布时间</td>
                    <td>机构详情</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list" :key="item.id">
                    <td><input type="checkbox" v-model="ids" :value="item.id" @change="checkone"></td>
                    <td>{{item.name}}</td>
                    <td>
                        <span v-if="item.conManyFwid==1">24h监护</span>
                        <span v-if="item.conManyFwid==2">特殊护理</span>
                    </td>
                    <td><img :src="item.photo" alt="" width="100px" height="100px"></td>
                    <td>{{ item.adress }}</td>
                    <td>{{item.phone.substring(0,3)}}****{{item.phone.substring(7,11)}}</td>
                    <td>{{ item.state == 1 ? '已发布' : '未发布'}}</td>
                    <td>{{ item.des }}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            共{{data.totalCount}}条数据，当前第{{queryInfo.pageIndex}}页，共{{queryInfo.pageIndex}}/{{data.totalPage}}页
            <input type="button" value="首页" class="btn btn-primary" @click="gopage('a')">
            <input type="button" value="上一页" class="btn btn-primary" @click="gopage('b')">
            <span class="btn btn-primary">1</span>
            <span class="btn btn-primary">2</span>
            <input type="button" value="下一页" class="btn btn-primary" @click="gopage('c')">
            <input type="button" value="尾页" class="btn btn-primary" @click="gopage('d')">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios';
const router = useRouter()
const route = useRoute()


let data:any = reactive({
    list:[],
    totalCount:0,
    totalPage:0,
})

let queryInfo = reactive({
    name:'',
    conmmanyfwid:'',
    pageIndex:1,
    pageSize:2
})


onMounted(()=>{
    getlist();
})

const getlist = () =>{
    axios({
        url:'/api/ConMany/GetConManies',
        method:'get',
        params:queryInfo
    })
    .then((res)=>{
        console.log(res);
        data.list = res.data.list;
        data.totalCount = res.data.totalCount;
        data.totalPage = res.data.totalPage;
    })
    .catch((err)=>{
        console.log(err);
    })
}


const gopage = (str:any)=>{
    switch(str){
        case 'a':
            queryInfo.pageIndex = 1;
            break;
        case 'b':
            queryInfo.pageIndex--;
            break;
        case 'c':
            queryInfo.pageIndex++;
            break;
        case 'd':
            queryInfo.pageIndex = data.totalPage;
            break;
    }
    getlist();
}


let ids = ref([]);

let checkAll = ref(false);

const gocheckall = ()=>{
    checkAll.value = !checkAll.value;
    if(checkAll.value==true){
        ids.value = data.list.map((item:any)=>{
            return item.id;
        })
    }
    else{
        ids.value = [];
    }
}

const checkone = ()=>{
    if(ids.value.length==data.list.length){
        checkAll.value = true;
    }
    else{
        checkAll.value = false;
    }
}

const UpDown = (state:any)=>{
    axios({
        url:'/api/ConMany/UpdALLConMany',
        method:'put',
        params:{
            ids:ids.value.toString(),
            state:state
        }
    })
    .then((res)=>{
        console.log(res);
        alert('操作成功');
        getlist();
    })
    .catch((err)=>{
        console.log(err);
    })
}


</script>

<style scoped>
h1{
    text-align: center;
    color: royalblue;
}
</style>